import React, { useState } from 'react';
import ProForm from '@ant-design/pro-form';
import { Button, DatePicker, Form, Input, InputNumber, message, Modal, Select, Upload } from 'antd';
import ProCard from '@ant-design/pro-card';
import { PlusOutlined } from '@ant-design/icons';
import type { UploadFile } from 'antd/lib/upload/interface';

const { Option } = Select;
const { TextArea } = Input;

export type InformationModalProps = {
  visible: boolean;
  confirmLoading?: boolean;
  admin: boolean;
  showModalBtn?: boolean;
  onCancel: () => void;
  onChange?: (value?: string) => void;
};

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const DetailModal: React.FC<InformationModalProps> = (props) => {
  const formItemLayout = {
    labelCol: {
      xs: { span: 12 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 12 },
      sm: { span: 11 },
    },
  };
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState('');
  const [previewTitle, setPreviewTitle] = useState('');
  const [fileList, setFileList] = useState<UploadFile<any>[]>([
    {
      uid: '-1',
      name: 'image.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    },
  ]);
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>上传照片</div>
    </div>
  );
  function getBase64(file: Blob) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  }
  const handlePreview = async (file: any) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewVisible(true);
    setPreviewImage(file.url || file.preview);
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
  };
  const { admin } = props;

  return (
    <Modal width={898} visible={props.visible} onCancel={() => props.onCancel()} footer={false}>
      <ProForm<{
        name: string;
        company?: string;
        useMode?: string;
      }>
        {...formItemLayout}
        layout="horizontal"
        onFinish={async (values) => {
          await waitTime(2000);
          console.log(values);
          message.success('提交成功');
        }}
        params={{}}
        request={async () => {
          await waitTime(100);
          return {
            name: '王小明',
            useMode: 'chapter',
          };
        }}
        submitter={{
          render: (props, doms) => {
            if (admin) {
              return (
                <div style={{ textAlign: 'center', marginTop: '20px' }}>
                  <Button type="primary" htmlType="submit" style={{ margin: '0 8px' }}>
                    提交
                  </Button>
                  <Button
                    type="primary"
                    ghost
                    style={{ margin: '0 8px' }}
                    onClick={() => {
                      props.form?.resetFields();
                      setFileList([
                        {
                          uid: '-1',
                          name: 'image.png',
                          status: 'done',
                          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                        },
                      ]);
                    }}
                  >
                    重置
                  </Button>
                </div>
              );
            } else return;
          },
        }}
        size="small"
      >
        <ProCard split="vertical" style={{ paddingTop: '20px' }}>
          <ProCard colSpan="50%">
            <Form.Item label="姓名">王小明</Form.Item>
            {admin ? (
              <Form.Item label="电话" name="tel" initialValue={123321112321}>
                <Input placeholder="请输入电话" type="tel" maxLength={11} />
              </Form.Item>
            ) : (
              <Form.Item label="电话">123321112321</Form.Item>
            )}
            {admin ? (
              <Form.Item label="渠道来源" name="channel" initialValue={'1'}>
                <Select>
                  <Option value="1">Boss</Option>
                  <Option value="2">前程无忧</Option>
                  <Option value="3">智联招聘</Option>
                  <Option value="4">拉钩</Option>
                  <Option value="5">内推</Option>
                  <Option value="6">关系户</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="渠道来源">Boss</Form.Item>
            )}
            {admin ? (
              <Form.Item label="沟通时间" name="communication">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            ) : (
              <Form.Item label="沟通时间">2021-9-30 10:20</Form.Item>
            )}
            {admin ? (
              <Form.Item label="访问机构" name="jigou" initialValue={'1'}>
                <Select>
                  <Option value="1">南京擎盾</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="访问机构">南京擎盾</Form.Item>
            )}
            {admin ? (
              <Form.Item label="面试岗位" name="post" initialValue={'1'}>
                <Select>
                  <Option value="1">react开发工程师</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="面试岗位">react开发工程师</Form.Item>
            )}
            {admin ? (
              <Form.Item label="一面考官" name="Interviewer" initialValue={'1'}>
                <Select>
                  <Option value="1">曹孟阳</Option>
                  <Option value="2">焦凯</Option>
                  <Option value="3">张玲烨</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="一面考官">曹孟阳</Form.Item>
            )}
            {admin ? (
              <Form.Item label="一面签到时间" name="InterviewerTime">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            ) : (
              <Form.Item label="一面签到时间">2021-9-30 10:20</Form.Item>
            )}
            {admin ? (
              <Form.Item label="一面时长" name="time1" initialValue={100}>
                <InputNumber
                  placeholder="请输入时长"
                  precision={0}
                  style={{ width: '100%' }}
                  formatter={(value) => `${value}/分钟`}
                />
              </Form.Item>
            ) : (
              <Form.Item label="一面时长">100分钟</Form.Item>
            )}
            {admin ? (
              <Form.Item label="一面结果" name="timeres" initialValue={'1'}>
                <Select>
                  <Option value="1">一面未通过</Option>
                  <Option value="2">一面通过</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="一面结果">一面未通过</Form.Item>
            )}
            {admin ? (
              <Form.Item label="备注" name="extra" initialValue="">
                <TextArea
                  showCount
                  placeholder="添加备注"
                  maxLength={100}
                  onChange={(e) => {
                    console.log('Change:', e.target.value);
                  }}
                />
              </Form.Item>
            ) : (
              <Form.Item label="备注">
                期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符
              </Form.Item>
            )}
            {admin ? (
              <Form.Item label="一面评价" name="pingjia1" initialValue="">
                <TextArea
                  showCount
                  placeholder="添加评价"
                  maxLength={100}
                  onChange={(e) => {
                    console.log('Change:', e.target.value);
                  }}
                />
              </Form.Item>
            ) : (
              <Form.Item label="一面评价">
                热爱加班，少加一天班这人都会浑身不适。节假日都来上班，从不休息。
              </Form.Item>
            )}
          </ProCard>
          <ProCard colSpan="50%">
            {admin ? (
              <Form.Item label="二面签到时间" name="InterviewerTime2">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            ) : (
              <Form.Item label="二面签到时间">2021-9-30 10:20</Form.Item>
            )}
            {admin ? (
              <Form.Item label="二面考官" name="Interviewer2" initialValue={'1'}>
                <Select>
                  <Option value="1">曹孟阳</Option>
                  <Option value="2">焦凯</Option>
                  <Option value="3">张玲烨</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="二面考官">曹孟阳</Form.Item>
            )}

            {admin ? (
              <Form.Item label="二面时长" name="time2" initialValue={100}>
                <InputNumber
                  placeholder="请输入时长"
                  precision={0}
                  style={{ width: '100%' }}
                  formatter={(value) => `${value}/分钟`}
                />
              </Form.Item>
            ) : (
              <Form.Item label="二面时长">100分钟</Form.Item>
            )}
            {admin ? (
              <Form.Item label="二面结果" name="timeres2" initialValue={'1'}>
                <Select>
                  <Option value="1">二面未通过</Option>
                  <Option value="2">二面通过</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="二面结果">二面未通过</Form.Item>
            )}
            {admin ? (
              <Form.Item label="备注" name="extra2" initialValue="">
                <TextArea
                  showCount
                  placeholder="添加备注"
                  maxLength={100}
                  onChange={(e) => {
                    console.log('Change:', e.target.value);
                  }}
                />
              </Form.Item>
            ) : (
              <Form.Item label="备注">
                期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符期望薪资过高，与岗位不符
              </Form.Item>
            )}
            {admin ? (
              <Form.Item label="二面评价" name="pingjia2" initialValue="">
                <TextArea
                  showCount
                  placeholder="添加评价"
                  maxLength={100}
                  onChange={(e) => {
                    console.log('Change:', e.target.value);
                  }}
                />
              </Form.Item>
            ) : (
              <Form.Item label="二面评价">
                热爱加班，少加一天班这人都会浑身不适。节假日都来上班，从不休息。
              </Form.Item>
            )}
            {admin ? (
              <Form.Item label="当前状态" name="status" initialValue={'1'}>
                <Select>
                  <Option value="1">已录取</Option>
                  <Option value="2">不要了</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="当前状态">已录取</Form.Item>
            )}
            {admin ? (
              <Form.Item label="入职日期" name="ruzhi">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            ) : (
              <Form.Item label="入职日期">2021-9-30</Form.Item>
            )}
            {admin ? (
              <Form.Item label="工位所在" name="gongwei" initialValue={'1'}>
                <Select>
                  <Option value="1">江苏科技金融大厦二层AI研发</Option>
                  <Option value="2">茶水间</Option>
                </Select>
              </Form.Item>
            ) : (
              <Form.Item label="工位所在">江苏科技金融大厦二层AI研发</Form.Item>
            )}
            {admin ? (
              <Form.Item label="工牌照片" name="photo" initialValue={fileList}>
                <Upload
                  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                  listType="picture-card"
                  fileList={fileList}
                  onPreview={(value) => handlePreview(value)}
                  onChange={(value) => {
                    console.log(value);
                    setFileList([...value.fileList]);
                    // setFileList([value.file]);
                  }}
                >
                  {fileList.length >= 1 ? null : uploadButton}
                </Upload>
              </Form.Item>
            ) : (
              <Form.Item label="工牌照片">
                <img
                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            )}
          </ProCard>
          <Modal
            visible={previewVisible}
            title={previewTitle}
            footer={null}
            onCancel={() => setPreviewVisible(false)}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </ProCard>
      </ProForm>
    </Modal>
  );
};
export default DetailModal;
